<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>样式的继承</title>
    <style>


        /*
            样式的继承,我们为一个元素设置的样式,同时也会应用到它的后代元素上

            继承是发生在祖先和后代元素之间的

            继承的设计是为了方便我们的开发,利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
            这样只需设置一次即可让所有的元素都具有该样式。


            注意: 并不是所有的样式都会被继承,
                  比如 背景相关的,布局相关的这些样式都不会被继承
         */

        body {
            font-size: 12px;
        }


        p {
            color: red;
        }

        div {
            color: yellowgreen;
        }
    </style>
  </head>
  <body>
    <p>
      我是一个p元素
      <span>我是p元素中的span</span>
    </p>

    <span>我是p元素外的span元素</span>

    <div>
      我是div
      <span>
        我是div中的span
        <em>我是span中的em</em>
      </span>
    </div>
  </body>
</html>
